<template>
    <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="配置" name="field" />
      <!-- <el-tab-pane label="数据" name="data" /> -->
      <el-tab-pane label="参数" name="location" />
    </el-tabs>
    <div class="field-box">
      
      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        <el-form v-show="currentTab === 'field'" size="small" label-width="90px">

              <el-form-item v-if="configData.layerName!==undefined" label="图层名称">
                <el-input v-model="configData.layerName" placeholder="请输入图层名称" />
              </el-form-item>
             
              <el-form-item v-if="configData.chartOption.color1!==undefined" label="颜色1">
                <el-color-picker v-model="configData.chartOption.color1" show-alpha></el-color-picker>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.color2!==undefined" label="颜色2">
                <el-color-picker v-model="configData.chartOption.color2" show-alpha></el-color-picker>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.dur!==undefined" label="动画时长">
                <el-slider v-model="configData.chartOption.dur" :min="0" :max="10" :step="0.1" show-input></el-slider>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.animate!==undefined" label="载入动画">
                <el-select v-model="configData.chartOption.animate" placeholder="请选择">
                  <el-option
                    v-for="item in animateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>


        </el-form>
        <!-- 表单属性 -->
        <el-form v-show="currentTab === 'data'" size="small" label-width="90px">
          <el-form-item v-if="" label="是否静态数据">
            <el-switch v-model="configData.chartOption.isStaticData" />
          </el-form-item>

          <el-form-item v-show="configData.chartOption.isStaticData === true" label="静态数据值" prop="desc">
            <el-input type="textarea" :rows="20" v-model="staticDataValue"  @blur.prevent="changeStaticData()"></el-input>
          </el-form-item>

          <el-form-item v-show="configData.chartOption.isStaticData === false" label="接口地址">
            <el-input type="textarea" :rows="5" placeholder="请输入接口地址" v-model="interfaceUrl" @blur.prevent="changeInterfaceUrl()">
            </el-input>
          </el-form-item>

          <el-form-item v-show="configData.chartOption.isStaticData === false" label="请求方式">
            <el-radio-group v-model="configData.chartOption.requestMethod">
              <el-radio label="GET"></el-radio>
              <el-radio label="POST"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-show="configData.chartOption.isStaticData === false" label="请求参数">
            <el-input type="textarea" :rows="5" placeholder="请输入请求参数" v-model="requestParameters" @blur.prevent="changeRequestParameters()">
            </el-input>
          </el-form-item>

        </el-form>
        <!-- 组件位置 -->
        <el-form v-show="currentTab === 'location'" size="small" label-width="90px">
          <el-form-item label="X位置">
            <el-input-number v-model="configData.x" controls-position="right"  :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="y位置">
            <el-input-number v-model="configData.y" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input-number v-model="configData.width" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number v-model="configData.height" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>

import {animateOptions} from '../../animate/animate'


export default {
  components: {
    
  },
  props: ["costomData"],
  data() {
    return {
      activeNames: ['1'],
      currentTab: 'field',
      configData: this.costomData,
      animateOptions,
      staticDataValue: this.costomData != null ? this.costomData.chartOption.staticDataValue : '123',
      interfaceUrl: this.costomData.chartOption.interfaceURL != '' ? this.costomData.chartOption.interfaceURL : '',
      requestParameters: this.costomData.chartOption.requestParameters != '' ? this.costomData.chartOption.requestParameters : ''
    }
  },
  //页面加载完执行
  mounted() {
    
  },
  computed: {
    
  },
  watch: {
    configData: {
      deep: true,
      handler(newVal) {
        // console.log("1=>", newVal);
        this.$emit("costom-change", newVal);
      }
    },
    costomData: {
      deep: true,
      handler(newVal) {
        this.configData = newVal;
        this.staticDataValue = newVal.chartOption.staticDataValue;
        this.interfaceUrl = newVal.chartOption.interfaceURL;
        this.requestParameters = newVal.chartOption.requestParameters;
      }
    }
  },
  methods: {
    changeStaticData() {
      //如果是静态数据就给staticDataValue赋值
      if (this.configData.chartOption.isStaticData == true) {
          //this.configData.staticDataValue = JSON.parse(this.staticDataValue);
          this.$set(this.configData.chartOption, 'staticDataValue', this.staticDataValue);
      } else {
          //this.configData.interfaceURL = this.staticDataValue;
          this.$set(this.configData.chartOption, 'staticDataValue', this.staticDataValue);
      }
    },
    changeInterfaceUrl() {
      this.$set(this.configData.chartOption, 'interfaceURL', this.interfaceUrl);
    },
    changeRequestParameters() {
      this.$set(this.configData.chartOption, 'requestParameters', this.requestParameters);
    }
  }
}
</script>

<style scoped>
/deep/ .center-tabs .el-tabs__item {
    width: 50%;
    text-align: center;
}
</style>